<template>
	<view class="echarts_wrap">
		<ui-echarts ref="chart" :option="option"></ui-echarts>
	</view>
</template>

<script>
	export const lines = {
		simple: {
			grid: {
				right: 20
			},
			xAxis: {
				type: 'category',
				data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			},
			yAxis: {
				type: 'value'
			},
			series: [{
				data: [150, 230, 224, 218, 135, 147, 260],
				type: 'line'
			}]
		}
	}
	export default {
		name: "ui-chart-view",
		props: {
			line:{
				type:Array
			},
			// 图表类型
			type: {
				type: String,
				default: 'line'
			},
			// 图表option key
			name: {
				type: String,
				default: 'simple'
			}
		},
		data() {
			return {
				option: {}
			};
		},
		watch: {
			type(newVal, oldVal) {
				this.refreshOpt()
			},
			name(newVal, oldVal) {
				this.refreshOpt()
			}
		},
		methods: {
			refreshOpt() {
				const option = this.line[this.name];
				this.$refs?.chart?.disposeChart();
				this.$nextTick(() => {
					this.option = {
						...option
					}
				})
			}
		},
		mounted() {
			// lines = this.line
			this.refreshOpt()
		}
	}
</script>

<style lang="scss" scoped>

</style>